<template>
  <view class="blog-detail">
    <view class="wrap">
      <p class="title" v-if="obj.type === 2">{{ obj.title }}</p>

      <view class="content">
        <u-avatar size="mini" mode="square" :src="obj.user?.avatar"></u-avatar>
        <view class="detail">
          <view class="top_detail">
            <view>
              <text class="name">{{ obj.user?.username }}</text>
              <text class="time">{{ obj.updateDate }}</text>
            </view>
            <!-- <image
                        @click="onDelete"
                        class="del_image"
                            src="/static/img/del.png"
                            mode="heightFix"
                        /> -->
            <u-icon v-if="userInfo.id == obj.user?.id" @click="onDelete" name="trash" color="#e3742e" size="46"></u-icon>
          </view>
          <view class="arti">
            {{ obj.content }}
          </view>
          <view class="image">
            <image
              @click="previewImage(image, obj.images?.split(','))"
              v-for="(image, i) in obj.images?.split(',')"
              :key="i"
              :src="image"
              mode="aspectFill"
            />
          </view>
        </view>
      </view>
      <comment :commentList="commentList" @reply="reply" @delComment="delComment" />

      <!-- <view class="tool">
                <view class="comment-list" v-for="(item, index) in commentList" :key="index">
                    <view class="comment-author">
                        <u-avatar size="mini" :src="item.user.avatar"></u-avatar>
                        <view>
                            <p class="name">{{item.user.username}}</p>
                            <p class="">{{item.updateDate}}</p>
                        </view>
                    </view>
                    <view class="comment_content">
                        <p class="text">{{item.content}}</p>
                    </view>
                </view>
            </view> -->
    </view>
    <view class="comment_input">
      <u-input
        :focus="inputFocus"
        @blur="onBlur"
        v-model="form.content"
        type="textarea"
        height="60"
        class="comment"
        :border="true"
        border-color="#b3b3b3"
        bg-color="#fff"
        :placeholder="placeholder"
        :always-embed="true"
        :show-confirmbar="false"
        :adjust-position="true"
        cursor-spacing="50"
      />
      <u-button @click="onSendComment" class="send_btn" size="mini">发送</u-button>
      <view class="right">
        <!-- <image
                    class="pl_image"
                    src="/static/img/pinglun.png"
                    mode="heightFix"
                    /> -->
        <u-icon v-if="!obj.isThumb" @click="thumbUp" name="thumb-up" :size="50" color="#9a9a9a"></u-icon>

        <u-icon v-if="obj.isThumb" @click="thumbUp" name="thumb-up-fill" :size="50"></u-icon>
        <view v-if="obj.thumbCount">
          {{ obj.thumbCount }}
        </view>
        <!-- <image
                    class="dz_image"
                    src="/static/img/dianzan.png"
                    mode="heightFix"
                    /> -->
      </view>
    </view>

    <u-modal v-model="delshow" :show-cancel-button="true" :mask-close-able="true" @confirm="confirmDel" :content="delObj.content"></u-modal>
  </view>
</template>

<script setup lang="ts">
  import { apiBlogOne, apiCreateComment, apiDelBlog, apiDelComment, apiGetComment, apiThumbUpBlog, apiUnThumbUpBlog } from '@/api/blog'
  import { uToast } from '@/component/uTools'
  import { userStore } from '@/store/user'
  import type { TComment, TArtical } from '@/types/blog'
  import { onLoad } from '@dcloudio/uni-app'
  import { storeToRefs } from 'pinia'
  import { ref } from 'vue'
  import Comment from '../component/comment.vue'

  const delObj = ref({
    type: 1,
    content: '确定要删除文章吗?',
  })
  const commentId = ref()
  const articalId = ref()
  const placeholder = ref('请输入评论...')
  const inputFocus = ref(false)
  const obj = ref<Partial<TArtical>>({})
  const delshow = ref(false)
  const form = ref<any>({
    content: '',
    parentId: 0,
    blogId: 0,
    userId: 0,
    toUserId: null,
    firstParentId: 0,
  })
  const queryItem = ref<any>({
    blogId: 0,
    userId: 0,
  })
  const commentList = ref<TComment[]>()
  const uStore = userStore()
  const { userInfo } = storeToRefs(uStore)
  onLoad((query: any) => {
    console.log(query)
    articalId.value = query.articalId
    articalId.value = 1
    queryItem.value.blogId = articalId.value
    queryItem.value.userId = userInfo.value.id
    getDataByOne()
    getComment()
  })

  // 文章数据
  const getDataByOne = () => {
    apiBlogOne(queryItem.value).then((res: any) => {
      console.log(res)
      if (res.code === 200) {
        obj.value = res.data
      } else {
        uToast(res.message || '出错！')
        obj.value = {}
      }
    })
  }

  // 查看图片
  const previewImage = (image: string, urls: any) => {
    uni.previewImage({
      current: image, // 当前显示图片的http链接
      urls, // 需要预览的图片http链接列表
    })
  }

  // 评论列表
  const getComment = () => {
    apiGetComment(articalId.value).then((res: any) => {
      console.log(res)
      if (res.code === 200) {
        commentList.value = res.data.data
      }
    })
  }

  // input 失焦
  const onBlur = () => {
    inputFocus.value = false
    placeholder.value = '请输入评论...'
    form.value.parentId = 0
    form.value.toUserId = 0
  }

  // 回复评论
  const reply = (obj: any) => {
    console.log(obj)
    placeholder.value = '回复 ' + obj.user.username
    inputFocus.value = true
    form.value.parentId = obj.id
    form.value.toUserId = obj.user.id
    form.value.firstParentId = obj.firstParentId || obj.parentId || obj.id
  }

  // 发送评论
  const onSendComment = () => {
    form.value.blogId = articalId.value
    form.value.userId = userInfo.value.id
    if (!form.value.content) {
      return uToast('内容不能为空!')
    }
    apiCreateComment(form.value).then((res: any) => {
      if (res.code === 200) {
        form.value.content = ''
        uToast('评论成功')
        getComment()
      }
    })
  }

  // 点赞
  const thumbUp = () => {
    if (obj.value.isThumb) {
      // 已经点赞  取消点赞
      apiUnThumbUpBlog(queryItem.value).then(res => {
        if (res.code === 200) {
          obj.value.isThumb = false
          obj.value.thumbCount!--
          // getDataByOne();
        }
      })
      return
    }
    apiThumbUpBlog(queryItem.value).then(res => {
      if (res.code === 200) {
        obj.value.isThumb = true
        obj.value.thumbCount!++
        // getDataByOne();
      }
    })
  }

  // 删除评论
  const delComment = (id: number) => {
    delshow.value = true
    delObj.value.type = 2
    delObj.value.content = '确定要删除评论吗?'
    commentId.value = id
  }

  //删除 文章
  const onDelete = () => {
    delObj.value.type = 1
    delObj.value.content = '确定要删除文章吗?'
    delshow.value = true
  }
  // 确定删除
  const confirmDel = () => {
    if (delObj.value.type === 1) {
      // 删除文章
      apiDelBlog(articalId.value).then((res: any) => {
        if (res.code === 200) {
          uToast('删除成功!')
          getDataByOne()
          uni.navigateBack()
        } else {
          uToast('删除失败!')
        }
      })
    } else if (delObj.value.type === 2) {
      // 删除评论
      apiDelComment(commentId.value).then(res => {
        if (res.code === 200) {
          uToast('删除成功！')
          getComment()
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
